<script setup lang="ts">
import type { ProcessIOStat } from '@/types/process'

interface Props {
  processes: ProcessIOStat[]
  sortField: keyof ProcessIOStat | null
  sortOrder: 'asc' | 'desc'
}

interface Emits {
  (e: 'sort', field: keyof ProcessIOStat): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const formatBytes = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes'

  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatSpeed = (bytesPerSecond: number): string => {
  return formatBytes(bytesPerSecond) + '/s'
}

const formatDate = (timestamp: number): string => {
  return new Date(timestamp * 1000).toLocaleString()
}

const getSortIcon = (field: keyof ProcessIOStat): string => {
  if (props.sortField !== field) {
    return '↕️'
  }
  return props.sortOrder === 'asc' ? '↑' : '↓'
}

const handleSort = (field: keyof ProcessIOStat) => {
  emit('sort', field)
}
</script>

<template>
  <div class="process-table-container">
    <table class="process-table">
      <thead>
        <tr>
          <th @click="() => handleSort('pid')" class="sortable">PID {{ getSortIcon('pid') }}</th>
          <th @click="() => handleSort('name')" class="sortable">
            进程名 {{ getSortIcon('name') }}
          </th>
          <th @click="() => handleSort('create_time')" class="sortable">
            创建时间 {{ getSortIcon('create_time') }}
          </th>
          <th @click="() => handleSort('read_count')" class="sortable">
            读取次数 {{ getSortIcon('read_count') }}
          </th>
          <th @click="() => handleSort('write_count')" class="sortable">
            写入次数 {{ getSortIcon('write_count') }}
          </th>
          <th @click="() => handleSort('read_bytes')" class="sortable">
            读取字节数 {{ getSortIcon('read_bytes') }}
          </th>
          <th @click="() => handleSort('write_bytes')" class="sortable">
            写入字节数 {{ getSortIcon('write_bytes') }}
          </th>
          <th @click="() => handleSort('read_speed')" class="sortable">
            读取速度 {{ getSortIcon('read_speed') }}
          </th>
          <th @click="() => handleSort('write_speed')" class="sortable">
            写入速度 {{ getSortIcon('write_speed') }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="process in processes" :key="process.pid">
          <td>{{ process.pid }}</td>
          <td>{{ process.name }}</td>
          <td>{{ formatDate(process.create_time) }}</td>
          <td>{{ process.read_count }}</td>
          <td>{{ process.write_count }}</td>
          <td>{{ formatBytes(process.read_bytes) }}</td>
          <td>{{ formatBytes(process.write_bytes) }}</td>
          <td>{{ formatSpeed(process.read_speed) }}</td>
          <td>{{ formatSpeed(process.write_speed) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/variables.scss' as vars;
@use '@/style/mixins.scss' as mixins;

.process-table-container {
  width: 100%;
  overflow-x: auto;
}

.process-table {
  @include mixins.glass-table;
  min-width: 800px;
}
</style>
